<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
                title="我的嗨购"
                left-arrow
                @click-left="$router.back()"
            />
        </header>
        <div class="content">
            <div class="my-user">
                <ul>
                    <li class="li1">
                        <div><img src="https://img0.baidu.com/it/u=460641668,1033276091&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                        <p>磷叶石
                           <!-- <span><van-tag round  color="rgba(0,0,0,.3)" text-color="#fff" >小白守约604分</van-tag></span> -->
                           <span><van-tag class="span1" round  color="rgba(0,0,0,.3)" text-color="#fff" >京享值</van-tag></span>  
                           
                        </p>
                        <h6>
                            <van-popover
                                 theme="dark"
                                placement="bottom-end"
                                v-model="showPopover"
                                trigger="click"
                                :actions="actions"  
                                @select="onSelect"
                            >
                                <template #reference>
                                    <van-icon size='22' color="#fff" name="setting-o" />
                                </template>
                            </van-popover>
                            
                        </h6>
                    </li>
                    <li>

                    </li>
                    <li class="li2">
                        <van-row type="flex" justify='center'>
                            <van-col span='6'>
                                <van-icon name="like-o" size="22" color="#f0f0f0"  />
                                <p class="liP">商品收藏</p>
                            </van-col>
                            <van-col span='6'>
                                <van-icon name="star-o" size="22" color="#f0f0f0" />
                                <p class="liP">店铺收藏</p>
                            </van-col>
                            <van-col span='6'>
                                <van-icon name="eye-o" size="22" color="#f0f0f0" />
                                <p class="liP">我的浏览</p>
                            </van-col>
                        </van-row>
                    </li>
                </ul>
            </div>
            <div class="my-grid-div">
                <van-grid :border='false' icon-size="24px" :square="true">
                    <van-grid-item icon="credit-pay" text="待付款" />
                    <van-grid-item icon="paid" text="待收货" />
                    <van-grid-item icon="balance-o" text="退款/售后" />
                    <van-grid-item icon="orders-o" text="全部订单" />
                </van-grid>
            </div>
            <div class="my-div">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F22%2F20191222230710_wwpyq.thumb.700_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648388155&t=03f4bc2595a79451aa36893af9018d9c" alt="">
            </div>
             <div class="my-div">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F20181%2F22%2F201812222319_W3PuV.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648388242&t=ddac2c3a5f8774d1ac1a510fb9b120a4" alt="">
            </div>
            <div class="my-div">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171219%2Fb877040a64a9437180354f7a8557fb95.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648388284&t=e87cff1d8a02040848755a87f53453e8" alt="">
            </div>
            <div class="my-div">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fe9594fe5b8e5c453ac909a48511b9a721177968a.png&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648388320&t=7c7b1fdc4d89380c8c872b738916b4fc" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import Vue from "vue"
import { mapState } from 'vuex'
import { Button ,  NavBar , Icon ,Tag ,Popover , Toast , GridItem , Grid  } from  'vant'

Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Button)
Vue.use(Tag)
Vue.use(Popover);
Vue.use(Grid);
Vue.use(GridItem);
export default {
    name: "user",
    data(){
        return{
            showPopover: false,
            // 通过 actions 属性来定义菜单选项
            actions: [
                { index:1, text: '去首页'  }, 
                { index:2, text: '去注册' }, 
                { index:3, text: '退出登录' }
            ],
        }
    },
    computed :{
        ...mapState({
            loginState:state => state.loginState
        })
    },
    methods:{
        loginOut(){
            localStorage.removeItem('token')
            localStorage.removeItem('userid')
            localStorage.removeItem('loginState')
            this.$store.commit('changeLoginState', false) // 二次渲染的关键
            // this.$router.push('/login')
        },
        onSelect({index}) {
            switch (index) {
                case 1:
                    this.$router.push('/home')
                    break;
                case 2:
                    this.$router.push('/register')
                    break;
                case 3:
                    Toast('退出成功');
                    this.loginOut()
                    this.$router.push('/login')
                    break;
                default:
                    break;
            }
            
        },
    },
    mounted(){
        if(this.$route.name === 'user'){
            this.$store.state.active = 3
            console.log(this.$store.state.active);
        }
    }
}
</script>

<style lang="stylus" scoped>
.my-user
    background: url(https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png) no-repeat scroll 0 0/cover
    width: 100%
    height: 2.2rem
    ul
        width: 100%
        height: 100%
        overflow hidden
.li1
    padding: 0 10px
    margin-top: 15px
    display: flex
    justify-content: space-around
    div
        // background-color: #f5f5f5
        // border: 1px solid #f5f5f5
        // border-radius: 50px
        overflow hidden

        img
            border-radius: 50px
            border: 1px solid #f5f5f5
            width: .6rem
            height: .6rem
    p 
        // width: 2rem
        margin-right: 1.8rem
        color: #fff
        font-size: 18px
        span
            display: block
    // h6
.van-tag 
    text-align: center
.van-col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.li2
    margin-top: .2rem
.liP    
    color: #fff
    font-size: 14px
.my-grid-div
    border-radius:0.12rem 
    background-color: #fff
    bottom:0.3rem
    position relative
    height: 0.9rem
    padding: 0 10px
.content
    background-color: #f6f6f6
.my-div
    width: 100%
    img
        width: 100%
        display: block
</style>